<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="搜索条件">
          <el-select
            v-model="listQuery.keywordField"
            size="mini"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option
              v-for="item in conditionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="listQuery.keyword"
            size="mini"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
          >
            搜索
          </el-button>
        </el-form-item>
        <el-form-item v-if="multipleSelection.length > 0">
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-finished"
            @click="saveHandOrder"
          >
            交付
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="table"
        :data="handOrderList"
        align="center"
        highlight-current-row
        default-expand-all
        max-height="600"
        header-cell-class-name="custome-el-table-header-cell2"
        cell-class-name="custome-el-table-cell2"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" :selectable="checkbox" />
        <el-table-column
          label="通知单号"
          prop="manufactureOrderCode"
          width="160px"
          fixed="left"
        >
          <template slot-scope="{ row }">
            <router-link
              target="_blank"
              :to="{
                path: '/manufacture_order',
                query: { code: row.manufactureOrderCode }
              }"
            >
              <el-button type="text">{{ row.manufactureOrderCode }}</el-button>
            </router-link>
            <el-tooltip
              effect="dark"
              content="按通知单号查询"
              placement="top-start"
            >
              <i class="el-icon-search" @click="handleSearchByOrder(row)" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="任务单号"
          prop="manufactureTaskCode"
          width="150px"
          fixed="left"
        />
        <el-table-column label="识别码" prop="goodsFullCode" width="150px" />
        <el-table-column
          label="货品简称"
          prop="goodsAbbr"
          width="150"
          fixed="left"
        />
        <el-table-column
          label="货号"
          prop="goodsCode"
          width="150"
          fixed="left"
        />
        <el-table-column
          label="批号"
          prop="goodsBatchCode"
          width="100"
          fixed="left"
        />
        <el-table-column label="浓度" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.concentration">
              {{ scope.row.concentration }}
              {{ scope.row.concentrationUnit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.specification">
              {{ scope.row.specification }} {{ scope.row.unit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="计划个数" prop="expectCount" width="80" />
        <el-table-column label="计划数量" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.expectCount">
              {{ scope.row.expectCount }} {{ scope.row.unit }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="实际个数" prop="expectQuantity" width="80" />
        <el-table-column label="实际数量" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.expectQuantity"
              >{{ scope.row.expectQuantity }} {{ scope.row.unit }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="重量" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.weight">
              {{ scope.row.weight }} {{ scope.row.weightUnit }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="损耗" prop="attritionRate" width="80" />
        <el-table-column label="备注" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.memo }}
          </template>
        </el-table-column>
        <el-table-column
          label="交付结果"
          align="center"
          width="120px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.handOverResult"
              size="mini"
              @change="
                (val) => {
                  selectChange(val, scope.row, scope.$index)
                }
              "
            >
              <el-option
                v-for="item in handOverResultOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
            <!-- <span v-if="!scope.row.handOverFlag">
              {{
                formatByKeyValue(
                  handOverResultOptions,
                  scope.row.handOverResult
                )
              }}
            </span> -->
          </template>
        </el-table-column>
        <el-table-column align="center" width="100px" fixed="right">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="拆分" placement="top-start">
              <el-button
                icon="el-icon-document-copy"
                size="mini"
                circle
                @click="handleCopyGoods(scope.row, scope.$index)"
              />
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top-start">
              <el-button
                icon="el-icon-delete"
                size="mini"
                circle
                class="danger-color"
                @click="handleRemoveGoods(scope.row, scope.$index)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { formatByKeyValue } from '@/utils'
import { orderListPreOptions } from '@/api/mes/manufactureOrder'
import { pageGoodsManufactureTask } from '@/api/mes/manufactureTask.js'
import { saveResultOrder } from '@/api/mes/manufactureResult.js'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      handOverResultOptions: null,
      goodsDeliveryOptions: null,
      goodsShapeOptions: null,
      twoOptions1: null,
      twoOptions2: null,
      twoOptions3: null,
      conditionOptions: [
        { value: 'manufactureOrderCode', label: '通知单号' },
        { value: 'manufactureTaskCode', label: '任务编号' }
      ],
      listLoading: false,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        withGoodsFlag: true,
        handOverResult: 0,
        type: 1,
        checkFlag: true
      },
      total: 0,
      handOrderList: [],
      multipleSelection: [],
      isData: true
    }
  },
  mounted() {
    orderListPreOptions().then((response) => {
      const data = response.data
      this.handOverResultOptions = data.handOverResult
      this.getList()
    })
  },
  methods: {
    formatByKeyValue,
    getList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      this.listLoading = true
      pageGoodsManufactureTask(this.listQuery)
        .then((response) => {
          const data = response.data
          data.rows.forEach((e) => {
            if (!e.handOverResult) {
              e.handOverResult = 0
            }
          })
          this.total = data.total
          this.handOrderList = data.rows
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleSearch() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    view(row) {
      console.log(row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    saveHandOrder() {
      const data = {
        handOverGoodsList: this.extractPushData(this.multipleSelection),
        mem0: ''
      }
      if (this.isData) {
        saveResultOrder(data).then((res) => {
          this.$message.success('交付成功')
          this.getList()
        })
      } else {
        this.$message.warning('请选择交付任务或请选择交付方式')
      }
    },
    checkbox(row) {
      if (row.status === 50) {
        return false
      } else {
        return true
      }
    },

    extractPushData(row) {
      const data = []
      this.isData = true
      row.forEach((item) => {
        if (item.handOverResult !== 0) {
          data.push({
            handOverResult: item.handOverResult,
            manufactureTaskGoodsId: item.manufactureTaskGoodsId
          })
        } else {
          this.isData = false
        }
      })
      return data
    },
    handleSearchByOrder(row) {
      this.listQuery.keyword = row.manufactureOrderCode
      this.getList()
    },
    selectChange(val, row, index) {
      if (val !== 0) {
        this.$refs.table.toggleRowSelection(row, true)
      } else {
        this.$refs.table.toggleRowSelection(row, false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
